<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <!-- 搜索 -->
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="getList"
    ></SearchForm>
    <!-- 分页 -->
    <TableList
      :data="data"
      :pagination="pagination"
      :bordered="bordered"
      :hover="hover"
      :size="size"
      :total="total"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handle-click-delete="handleClickDelete"
      @handle-forbidden="handleForbidden"
    ></TableList>
    <!-- 显示新增或修改对话框 -->
    <DialogForm
      ref="formRef"
      :visible="visible"
      :title="title"
      :data="formDataRef"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEditForm"
    ></DialogForm>
    <!-- 删除弹层 -->
    <Delete
      :visible="dialogDeleteVisible"
      :delete-text="operateText"
      @handle-delete="handleDelete"
      @handle-close="handleDeleteClose"
    ></Delete>
    <!-- end -->
    <!-- 禁用弹层 -->
    <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
  </div>
</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue'
import TableList from './components/TableList.vue'
import {
  getProjectDetails,
  getProjectList,
  projectAdd,
  projectUpdate,
  projectDelete,
  projectStatus
} from '@/api/serve'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next'
// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'

const data = ref([])
const total = ref(0)

const pagination = ref({
  pageNum: 1,
  pageSize: 5
})

const onPageChange = (pageInfo) => {
  console.log(pageInfo)
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  getList()
}

const getList = async () => {
  const result = await getProjectList(pagination.value)
  if (result.code == 200) {
    data.value = result.data.records
    total.value = result.data.total
  }
}
onMounted(() => {
  getList()
})

const handleClear = (val) => {
  // 清除数据
  if (val == 'name') {
    pagination.value.name = ''
  } else if (val == 'status') {
    pagination.value.status = ''
  }
  // 重新查询
  getList()
}
const handleReset = () => {
  pagination.value = {
    pageNum: 1,
    pageSize: 5
  }
  getList()
}
// 新增
const visible = ref(false)
const title = ref('')
const formRef = ref({})
// 新增按钮事件
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}
//关闭新增或修改对话框
const handleClose = () => {
  visible.value = false
}
//新增护理项目点击事件
const handleAdd = async (formData) => {
  const result = await projectAdd(formData)
  if (result.code == 200) {
    MessagePlugin.success('操作成功')
    visible.value = false
    formRef.value.handleClear()
    getList()
  } else {
    MessagePlugin.error(result.msg)
  }
}
const formDataRef = ref([])
//编辑
const handleEdit = async (id) => {
  const result = await getProjectDetails(id)
  if (result.code == 200) {
    formDataRef.value = result.data
    title.value = '编辑'
    visible.value = true
  } else {
    MessagePlugin.error(result.msg)
  }
}
//修改保存
const handleEditForm = async (formData) => {
  const result = await projectUpdate(formData)
  if (result.code == 200) {
    MessagePlugin.success('操作成功')
    visible.value = false
    formRef.value.handleClear()
    getList()
  } else {
    MessagePlugin.error(result.msg)
  }
}
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const dialogVisible = ref(false) // 禁用弹窗
const typeId = ref('') // 设置删除id
const typeStatus = ref(null) // 禁用启用
const statusText = ref('') // 启用禁用提示
// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList()
  }
}
// 禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}
// 确认删除
const handleDelete = async () => {
  const res = await projectDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    getList()
  }
}
// 点击删除
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}
// 关闭删除弹层
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
</script>
